<template>
  <div class="box">
    <div>
      <Top @handleQuery="handleQuery"></Top>
    </div>

    <div class="handleButtonArea" style="display: flex">
      <el-button type="primary" @click="studentAddFn">新增毕业学生</el-button>
      <el-button type="primary" @click="handleStudentDeleteAll"
        >批量删除</el-button
      >
      <!-- <el-upload class="upload-demo" > -->
      <el-button
        type="primary"
        style="margin-right: 10px; margin-left: 10px"
        @click="dialogVisible = true"
        >学生批量导入</el-button
      >
      <!-- </el-upload> -->
      <el-dialog v-model="dialogVisible" title="用户导入" width="30%">
        <el-upload
          class="upload-demo"
          drag
          action="#"
          :http-request="handleStudentImport"
          multiple
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">将文件拖到此处 ,或<em>点击上传</em></div>
          <template #tip>
            <div class="el-upload__tip">
              <!-- <div><input type="checkbox">是否更新已经存在的用户数据</div> -->
              <div>
                仅允许导入xls、xlsx格式文件。<a
                  href="http://www.lovetang.top/123.xlsx"
                  style="color: #1890ff; cursor: pointer"
                  >下载模板</a
                >
              </div>
            </div>
          </template>
        </el-upload>

        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="btnFun"> 确定 </el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
      <el-button type="primary" @click="handleStudentExport"
        >学生信息导出</el-button
      >
    </div>

    <div>
      <Tab1 :tableData="tableData"></Tab1>
    </div>

    <!-- 遮罩层 -->
    <div>
      <el-dialog
        v-model="dialogVisibl"
        title="Tips"
        width="500"
        :before-close="handleClose"
      >
        <span>
              <el-form
            ref="ruleFormRef"
            :model="listInfo"
            label-width="120px"
            class="demo-dynamic"
            :rules="rules"
        >
            <!-- 学生学号 -->
            <el-form-item label="学生学号:" prop="stuNo">
                <el-input
                    v-model="listInfo.stuNo"
                    type="text"
                    style="width: 200px"
                />
            </el-form-item>
            <!-- 学生姓名 -->
            <el-form-item label="学生姓名:" prop="stuName">
                <el-input
                    v-model="listInfo.stuName"
                    style="width: 200px"
                    type="text"
                />
            </el-form-item>
            <!-- 学生班级 -->
            <el-form-item label="学生班级:" prop="className">
                <el-input
                    v-model="listInfo.className"
                    style="width: 200px"
                    type="text"
                />
            </el-form-item>
            <!-- 毕业薪资 -->
            <el-form-item label="毕业薪资:" prop="salary">
                <el-input
                    v-model="listInfo.salary"
                    style="width: 200px"
                    type="text"
                />
            </el-form-item>
            <!-- 上班城市 -->
            <el-form-item label="上班城市" prop="workCity">
                <el-cascader placeholder="选择城市" v-model="value1" :options="options" filterable :props="props" @change="onChange" />
            </el-form-item>
            <!-- 专业 -->
            <el-form-item
                label="专&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;业:"
                prop="expertiseId"
            >
                <el-select
                    v-model="listInfo.expertiseId"
                    class="m-2"
                    placeholder="请选择专业"
                    size="large"
                >
                    <el-option
                        v-for="item in option"
                        :key="item.key"
                        :label="item.value"
                        :value="item.key"
                        style="width: 200px"
                    />
                </el-select>
            </el-form-item>

            <!-- 市场部来源 -->
            <el-form-item label="市&nbsp;&nbsp;场&nbsp;&nbsp;部:" prop="origin">
                <el-input
                    v-model="listInfo.origin"
                    style="width: 200px"
                    type="text"
                />
            </el-form-item>
            <el-form-item
                label="学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;院"
                prop="collegeId"
            >
                <el-select v-model="listInfo.collegeId">
                    <el-option label="游戏学院" :value="1" />
                    <el-option label="网站工程学院" :value="2" />
                </el-select>
            </el-form-item>
            <!-- 毕业年份 -->
            <el-form-item label="毕业年份" prop="gradYear">
                <el-date-picker
                    v-model="listInfo.gradYear"
                    type="year"
                    placeholder="选择毕业年份"
                />
            </el-form-item>
            <!-- 学生状态 -->
            <!-- 1:未毕业 2:返校重听3:已就业4:返回未就业5:以往未就业 -->
            <el-form-item label="学生状态" prop="status">
                <el-radio-group v-model="listInfo.status">
                    <el-radio :label="1">未毕业</el-radio>
                    <el-radio :label="2">返校重听</el-radio>
                    <el-radio :label="3">已就业</el-radio>
                    <el-radio :label="4">返回未就业</el-radio>
                    <el-radio :label="5">以往未就业</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        </span>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisibl = false">取消</el-button>
            <el-button type="primary" @click="centerDiage">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref,reactive } from "vue";
import Tab1 from "@/components/Table/Tab1.vue";
import Top from "@/components/Table/Top.vue";
import { studentAdd, studentList } from "@/api/server";
import { ElMessageBox } from 'element-plus'
import citys from '../../../../utils/CityData.json'
// let listInfo:any = ref({ status: 3 });
const listInfo = reactive({
    stuNo:'',
    stuName:'',
    className:'',
    salary:'',
    expertiseId:'',
    origin:'',
    collegeId:'',
    gradYear:0,
    status:'',
})
let props = reactive({
    expandTrigger: 'hover' as const,
    emitPath: false,
    value: 'code',
    label: 'label',
    children: 'children'
});
const type = ref('')
const tableData  = ref([])
let markText = ref<string>('新增');
var value1: string = ref('');
let limit = ref<number>(10);
let skip = ref<number>(0);
let total = ref<number>(0);
const dialogVisible = ref(false)
const dialogVisibl = ref(false)
const Query = ref({
    limit: limit.value, //每页条数
    skip: skip.value, //展示过的条数
    stuName: ''
});
// 导出数据条件
const exportQuery = {
    origin: null, //专业
    collegeId: null, //学院
    workCity: ''
};
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}

const studentAddFn = ()=>{
  markText.value = '新增';
  
  // listInfo.value = { status: 3 };
  dialogVisibl.value = true
}
async function Employment(){
 const res = await studentList(Query.value);
  console.log(res.data.data.result, "1234567");
  tableData.value = res.data.data.result;
}
Employment()

const handleQuery = (queryParams:any)=>{
   Query.value = Object.assign({},Query.value,queryParams)
   console.log('查询的参数',queryParams);
     exportQuery.collegeId = queryParams.collegeId;
    exportQuery.origin = queryParams.origin;
    Employment()
}

const centerDiage = async()=>{
  if (listInfo.gradYear) {
    let resultYear = new Date(
      listInfo.gradYear.toString()
    ).getFullYear();
    listInfo.gradYear = resultYear;
  }
   console.log('新增提交的参数',markText.value);
   
   if(type.value === 'add'){
      const res = await studentAdd(listInfo);
      Employment()
      // studentAdd(listInfo).then(()=>{
      //   Employment()
      // })
   }
}
let options = reactive(citys);
// 专业下拉
const option = reactive([
    {
        value: '游戏设计',
        key: 2
    },
    {
        value: '游戏开发',
        key: 1
    },
    {
        value: '元宇宙',
        key: 3
    }
]);
// 校验
const rules = reactive<any>({
    stuNo: [
        {
            required: true,
            message: '学号不能为空',
            trigger: 'blur'
        },
        { min: 11, max: 11, message: '学号必须为11位', trigger: 'change' }
    ],
    stuName: [
        {
            required: true,
            message: '学生名称必填',
            trigger: 'change'
        }
    ],
    salary: [
        {
            required: true,
            message: '毕业薪资必填',
            trigger: 'change'
        }
    ],
    workCity: [
        {
            required: true,
            message: '工作城市必选必填',
            trigger: 'change'
        }
    ],
    origin: [
        {
            required: true,
            message: '市场部必选',
            trigger: 'change'
        }
    ],
    expertiseId: [
        {
            required: true,
            message: '专业必选',
            trigger: 'change'
        }
    ],
    collegeId: [
        {
            required: true,
            message: '学院必选',
            trigger: 'change'
        }
    ],
    status: [
        {
            required: true,
            message: '学生状态必选',
            trigger: 'change'
        }
    ],
    gradYear: [
        {
            type: 'date',
            required: true,
            message: '毕业年份必选',
            trigger: 'change'
        }
    ],
    className: [
        {
            required: true,
            message: '毕业班级必选',
            trigger: 'change'
        }
    ]
});
</script>

<style scoped>
.handleButtonArea {
  margin-bottom: 20px;
}
.box {
  width: 90vw;
  height: 100vh;
}


</style>